<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>
        Load Awesome
    </title>
    <meta name="description" content="An awesome collection of — Pure CSS — Loaders and Spinners">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Load Awesome" />
    <meta property="og:url" content="http://github.danielcardoso.net/load-awesome/" />
    <meta property="og:title" content="Load Awesome" />
    <meta property="og:description" content="An awesome collection of — Pure CSS — Loaders and Spinners" />
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="assets/style.css" />
    <link rel="stylesheet" type="text/css" href="assets/loaders.css" />
</head>
<body>
    <div class="wrapper nano" style="background-color: #98bff6; color: #98bff6;">
        <div class="nano-content">
            <a href="https://github.com/danielcardoso/load-awesome" target="_blank" style="position: absolute; top: 0; left: 0; border: 0; z-index: 20;">
                <img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/c6286ade715e9bea433b4705870de482a654f78a/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_white_ffffff.png">
            </a>
            <header class="absolute">
                <div class="la-docs-header-container">
                    <div class="left">
                        <h1 class="title">Load <span>Awesome</span></h1>
                    </div>
                    <div class="right text-right">
                        <span class="buttongroup">
                            <a href="./" class="button button-circle">
                                Home
                            </a>
                            <a href="animations.html" class="button button-circle active">
                                Animations
                            </a>
                        </span>
                    </div>
                    <div class="cf"></div>
                </div>
            </header>
            <main class="la-docs-social-sharing-container">
                <div class="social-sharing header__share-buttons" data-permalink="http%3A%2F%2Fgithub.danielcardoso.net%2Fload-awesome%2F" data-permalink-github="danielcardoso/load-awesome">
                    <small class="social-sharing-title">Share: </small>
                    <a target="_blank" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fgithub.danielcardoso.net%2Fload-awesome%2F" class="share-facebook">
                        <span class="fa fa-facebook"></span>
                        <span class="share-title">Share</span>
                        <span class="share-count">0</span>
                    </a>
                    <a target="_blank" href="http://twitter.com/share?url=http%3A%2F%2Fgithub.danielcardoso.net%2Fload-awesome%2F&amp;text=Load%20Awesome%2C%20An%20awesome%20collection%20of%20%E2%80%94%20Pure%20%23CSS%20%E2%80%94%20%23Loaders%20and%20%23Spinners" class="share-twitter">
                        <span class="fa fa-twitter"></span>
                        <span class="share-title">Tweet</span>
                        <span class="share-count">0</span>
                    </a>
                    <a target="_blank" href="http://plus.google.com/share?url=http%3A%2F%2Fgithub.danielcardoso.net%2Fload-awesome%2F" class="share-google">
                        <span class="fa fa-google-plus"></span>
                        <span class="share-title">+1</span>
                        <span class="share-count">0</span>
                    </a>
                    <span>
                        <a class="twitter-follow-button" href="https://twitter.com/DanielCardoso" data-show-count="true" data-lang="en">
                        Follow @DanielCardoso
                        </a>
                        <script>
                        window.twttr = (function(d, s, id) {
                            var js, fjs = d.getElementsByTagName(s)[0],
                                t = window.twttr || {};
                            if (d.getElementById(id)) return t;
                            js = d.createElement(s);
                            js.id = id;
                            js.src = "https://platform.twitter.com/widgets.js";
                            fjs.parentNode.insertBefore(js, fjs);
                            t._e = [];
                            t.ready = function(f) {
                                t._e.push(f);
                            };
                            return t;
                        }(document, "script", "twitter-wjs"));
                        </script>
                    </span>
                </div>
            </main>
            <main>
                <div class="filter-parent" id="search">
                    <label for="filter-by">
                        <i class="fa fa-search"></i>
                    </label>
                    <div class="filter-input">
                        <input placeholder="Search animations" id="filter-by">
                        <a href="#" id="filter-clear" class="fa fa-times hide"></a>
                    </div>
                </div>
                <section id="filter" style="display: none;">
                    <h2 class="page-header">
                        Search for '<span class="text-color-default" id="filter-val"></span>'
                        <span class="pull-right"><span class="text-color-default" id="filter-total">0</span></span>
                    </h2>
                    <div class="row fontawesome-icon-list">
                    </div>
                    <div id="no-search-results">
                        <div class="text-center fw-100">
                            <i class="fa fa-warning margin-right-sm"></i> No results were found.
                        </div>
                    </div>
                </section>
                <div class="items-list-helper">
                    <span style="background-color: #98bff6;"><i class="fa fa-info-circle"></i> Move your mouse over each animation to play</span>
                </div>
                <div class="items items-list">
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-8bits la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-8bits.html">Ball 8bits<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-atom la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-atom.html">Ball Atom<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-beat la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-beat.html">Ball Beat<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-circus la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-circus.html">Ball Circus<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-climbing-dot la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-climbing-dot.html">Ball Climbing Dot<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-clip-rotate la-2x">
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-clip-rotate.html">Ball Clip Rotate<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-clip-rotate-multiple la-2x">
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-clip-rotate-multiple.html">Ball Clip Rotate Multiple<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-clip-rotate-pulse la-2x">
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-clip-rotate-pulse.html">Ball Clip Rotate Pulse<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-elastic-dots la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-elastic-dots.html">Ball Elastic Dots<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-fall la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-fall.html">Ball Fall<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-fussion la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-fussion.html">Ball Fussion<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-grid-beat la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-grid-beat.html">Ball Grid Beat<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-grid-pulse la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-grid-pulse.html">Ball Grid Pulse<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-newton-cradle la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-newton-cradle.html">Ball Newton Cradle<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-pulse la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-pulse.html">Ball Pulse<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-pulse-rise la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-pulse-rise.html">Ball Pulse Rise<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-pulse-sync la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-pulse-sync.html">Ball Pulse Sync<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-rotate la-2x">
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-rotate.html">Ball Rotate<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-running-dots la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-running-dots.html">Ball Running Dots<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-scale la-2x">
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-scale.html">Ball Scale<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-scale-multiple la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-scale-multiple.html">Ball Scale Multiple<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-scale-pulse la-2x">
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-scale-pulse.html">Ball Scale Pulse<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-scale-ripple la-2x">
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-scale-ripple.html">Ball Scale Ripple<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-scale-ripple-multiple la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-scale-ripple-multiple.html">Ball Scale Ripple Multiple<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-spin la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-spin.html">Ball Spin<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-spin-clockwise la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-spin-clockwise.html">Ball Spin Clockwise<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-spin-clockwise-fade la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-spin-clockwise-fade.html">Ball Spin Clockwise Fade<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-spin-clockwise-fade-rotating la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-ribbon-wrapper">
                            <div class="item-ribbon">NEW</div>
                        </div>
                        <div class="item-title"><a href="animations/ball-spin-clockwise-fade-rotating.html">Ball Spin Clockwise Fade Rotating<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-spin-fade la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-spin-fade.html">Ball Spin Fade<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-spin-fade-rotating la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-ribbon-wrapper">
                            <div class="item-ribbon">NEW</div>
                        </div>
                        <div class="item-title"><a href="animations/ball-spin-fade-rotating.html">Ball Spin Fade Rotating<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-spin-rotate la-2x">
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-spin-rotate.html">Ball Spin Rotate<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-square-clockwise-spin la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-square-clockwise-spin.html">Ball Square Clockwise Spin<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-square-spin la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-square-spin.html">Ball Square Spin<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-triangle-path la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-triangle-path.html">Ball Triangle Path<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-zig-zag la-2x">
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-zig-zag.html">Ball Zig Zag<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-zig-zag-deflect la-2x">
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/ball-zig-zag-deflect.html">Ball Zig Zag Deflect<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-cog la-2x">
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/cog.html">Cog<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-cube-transition la-2x">
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/cube-transition.html">Cube Transition<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-fire la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-ribbon-wrapper">
                            <div class="item-ribbon">NEW</div>
                        </div>
                        <div class="item-title"><a href="animations/fire.html">Fire<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-line-scale la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/line-scale.html">Line Scale<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-line-scale-party la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/line-scale-party.html">Line Scale Party<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-line-scale-pulse-out la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/line-scale-pulse-out.html">Line Scale Pulse Out<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-line-scale-pulse-out-rapid la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/line-scale-pulse-out-rapid.html">Line Scale Pulse Out Rapid<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-line-spin-clockwise-fade la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/line-spin-clockwise-fade.html">Line Spin Clockwise Fade<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-line-spin-clockwise-fade-rotating la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-ribbon-wrapper">
                            <div class="item-ribbon">NEW</div>
                        </div>
                        <div class="item-title"><a href="animations/line-spin-clockwise-fade-rotating.html">Line Spin Clockwise Fade Rotating<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-line-spin-fade la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/line-spin-fade.html">Line Spin Fade<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-line-spin-fade-rotating la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-ribbon-wrapper">
                            <div class="item-ribbon">NEW</div>
                        </div>
                        <div class="item-title"><a href="animations/line-spin-fade-rotating.html">Line Spin Fade Rotating<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-pacman la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/pacman.html">Pacman<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-square-jelly-box la-2x">
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/square-jelly-box.html">Square Jelly Box<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-square-loader la-2x">
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-ribbon-wrapper">
                            <div class="item-ribbon">NEW</div>
                        </div>
                        <div class="item-title"><a href="animations/square-loader.html">Square Loader<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-square-spin la-2x">
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/square-spin.html">Square Spin<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-timer la-2x">
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-ribbon-wrapper">
                            <div class="item-ribbon">NEW</div>
                        </div>
                        <div class="item-title"><a href="animations/timer.html">Timer<span>&#8594;</span></a></div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-triangle-skew-spin la-2x">
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title"><a href="animations/triangle-skew-spin.html">Triangle Skew Spin<span>&#8594;</span></a></div>
                    </div>
                </div>
            </main>
            <main class="la-docs-footer">
                <footer>
                    <ul class="la-docs-footer-links">
                        <li>
                            Load Awesome 1.1.0
                        </li>
                        <li>·</li>
                        <li>Created by <a href="https://twitter.com/DanielCardoso" target="_blank">@DanielCardoso</a></li>
                        <li>·</li>
                        <li>Licensed under
                            <a rel="license" href="https://github.com/danielcardoso/load-awesome/blob/master/LICENSE" target="_blank">
                                MIT
                            </a>
                        </li>
                    </ul>
                    <ul class="la-docs-footer-links">
                        <li><a href="https://github.com/danielcardoso/load-awesome" target="_blank">GitHub Project</a></li>
                        <li>·</li>
                        <li><a href="https://github.com/danielcardoso/load-awesome/blob/master/CHANGELOG" target="_blank">Changelog</a></li>
                        <li>·</li>
                        <li><a href="https://github.com/danielcardoso/load-awesome/issues" target="_blank">Issues</a></li>
                        <li>·</li>
                        <li><a href="https://github.com/danielcardoso/load-awesome/releases" target="_blank">Releases</a></li>
                    </ul>
                </footer>
            </main>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="assets/plugins.min.js"></script>
    <script src="assets/script.min.js"></script>
</body>
</html>